<template>
	<nullPage v-if="emptyPage"></nullPage>
	<div class="elcont" v-else>
		<!-- <div class="elheader">
			<img src='static/img/logo1.png'>
		</div> -->
		<div style="height: 6.5rem;position: relative;" v-if="info.advSwitch==1 && adShow">
			<Ad></Ad>
			<div id="adimg" @click="adClick">
				<Icon type="md-close" />&nbsp;
				<span>关闭广告</span>
			</div>
		</div>
		<Titles></Titles>
		<!-- <div style="height: 26px;width: 100%;">
				<Notice v-if="info.noticeSwitch==1"></Notice>
			</div> -->
		<div class="elmianCont" style="height:35vw;padding-top: 20px;">
			<Col :span="videospan" style="height: calc(100% - 40px);position: relative;">
				<Videos ref="video"></Videos>
				<div class="banner">
					<div>观看人数：{{pv>10000?(((pv-pv%1000)/10000+'w')):(pv)}}人</div>
					<div class="functions">           
						<span @click="thumb"><img :src="thumbStatus==true?'../../static/img/dz1.png':'../../static/img/wdz2.png'" alt="">点赞</span>
						<span @click="share"><img src="../../static/img/fx1.png" alt="">分享</span>
					</div>
				</div>
				<img class="shensuo" src="../../static/img/shensuo.png" alt="" @click="spans">
			</Col>
			<!-- <Col :span="9" v-show="menushow">
				<Menus @playPc="playPcVideo" @changeLivePc="toLiving"></Menus>
			</Col> -->
			<Col :span="9" style="height:100%;position: relative;" v-show="menushow">
				<chatWindow></chatWindow>
			</Col>
		</div>
		<div class="elmianCont">
			<Col :span="15">
				<comment></comment>
			</Col>
			<Col :span="9">
				<programme></programme>
			</Col>
		</div>

		<ViewingRestriction />
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tabHeight: "",
				adShow: true,
				pv: 0,
				videospan: 15,
				menushow: true,
			};
		},
		components: {
			Videos: () => import(`@/components/page/video`),  //视频播放器
			Menus: () => import(`@/components/page/menu`),   //菜单
			Titles: () => import("@/components/comm/title"), //标题
			ViewingRestriction: () => import("@/components/page/viewingRestriction"),  //鉴权密码
			Ad: () => import("@/components/comm/ad"),  //广告
			Notice: () => import("@/components/comm/notice"),  //公告
			nullPage: () => import("@/components/page/404"),  
			comment: () => import("@/components/comm/comment"),  //评论
			programme: () => import("@/components/comm/programme"),  //相关视频
			chatWindow: () => import("@/components/comm/chatWindow") //聊天窗口
		},
		computed: {
			emptyPage() {
				return this.$store.state.emptyPage;
			},
			containerShow() {
				return this.$store.state.containerShow; //主内容显隐
			},
			viewPermission() {
				return this.$store.state.viewPermission; //观看限制显隐
			},
			defaultLogo() {
				return this.$store.state.defaultLogo; //默认logo
			},
			info() {
				return this.$store.state.liveInfo;
			},
			thumbStatus(){
                return this.$store.state.thumbStatus;
			},
		},
		mounted(){
            this.checkThumb(); //点赞状态查询
		},
		created() {
			setTimeout(() => {
				this.init();
				this.getViewNumber(this.$store.state.liveInfo);
			}, 200)
			setInterval(() => {
				this.getViewNumber(this.$store.state.liveInfo);
			}, 30000);
		},
		methods: {
			share() {
				this.$share.getWxConfig(this.$store.state.liveInfo);
			},
			spans() {
				if (this.videospan == 24) {
					this.videospan = 15;
					this.menushow = true;
				} else {
					this.videospan = 24;
					this.menushow = false;
				}
			},
			// 查询点赞状态
			checkThumb(){
                this.$http.get(this.$api.thumbStatus(),{params:{
					roomId : this.$route.params.id,
					openId : localStorage.getItem("youkeId")
				}}).then(res => {
				    if (res.data.code == 0) {
						this.$store.state.thumbStatus = res.data.status
					}else{
						alert(res.data.msg)
					}
			   });
			},
			thumb() {
				let data = new FormData();
				data.append("roomId", this.$route.params.id);
				data.append("openId", localStorage.getItem("youkeId"));
				this.$http.post(this.$api.saveThumb(), data).then(res => {
					if (res.data.code == 0) {
						this.checkThumb();
					} else {
						alert(res.data.msg)
					}
				});
			},
			adClick() {
				this.adShow = false;
			},
			// 点播
			playPcVideo(url) {
				this.$store.state.liveImgShow = true;
				this.$nextTick(() => {
					this.$refs.video.showPlayer(url, false, true, "");
				});
			},
			/*返回直播按钮*/
			toLiving(value) {
				this.$refs.video.testStatus(this.$store.state.live);
			},
			getViewNumber(info) {
				/*观看人数*/
				this.$http
					.get(this.$api.getViewNum(this.$route.params.id))
					.then(res => {
						if (res.data.code == 0) {
							this.pv = res.data.pv;
						}
					});
			},
			// 初始化h5接口
			init() {
				let id = this.$route.params.id;
				let info = this.$store.state.liveInfo
				if (info.advSwitch == 1) {
					this.tabHeight = "calc(100% - 6.5rem)"
				} else {
					this.tabHeight = "100%";
				}
			},
		}
	};
</script>
<style lang="less" rel=stylesheet/less scoped="scoped">
	#adimg {
		position: absolute;
		right: 5%;
		top: 10px;
		z-index: 10;
		color: #fff;
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.shensuo {
		position: absolute;
		right: -25px;
		cursor: pointer;
		z-index: 10;
		top: calc(50% - 23px);
	}

	.elcont {
		height: 100%;
		overflow: auto;
		padding-bottom:50px;
	}

	.banner {
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 40px;
		padding: 0 10px;

		.functions {
			display: flex;
			align-items: center;

			img {
				width: 20px;
				margin-right: 5px;
			}

			span {
				display: flex;
				align-items: center;
				cursor: pointer;
				margin-left: 20px;
			}
		}
	}

	.elheader {
		text-align: left;
		display: flex;
		background: #212326;
		height: 60px;

		img {
			height: 40px;
			margin: 10px 0 0 20px;
		}
	}

	.elmianCont {
		margin: auto;
		width: 90%;
	}
</style>
